<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" th:with="blogConfig=${@configTag.getWebConfigByGroup('bobey')}">

<head>
    <th:block th:include="bobey/blog_include :: blogHeader(title=${blogConfig['oly.web.title']},
keywords=${blogConfig['oly.web.keywords']},
description=${blogConfig['oly.web.description']},
blogConfig=${blogConfig})" />

</head>

<body>
    <th:block th:include="bobey/blog_include::menu(menus=${@menuTag.getMenuTreeById(76)},blogConfig=${blogConfig})" />
    <!-- 主体部分 -->
    <section class="bobey-main-box">
        <div class="layui-container">
            <!-- login start -->
            <div id="login">
                <p>找回密码</p>
                <form class="layui-form" id="signupForm" autocomplete="new-password">
                    <div class="layui-form-item">
                        <label class="layui-form-label">邮箱</label>
                        <div class="layui-input-block">
                            <input type="text" name="email" lay-verify="required|email" placeholder="请输入邮箱"
                                autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">验证码</label>
                        <div class="layui-input-block">
                            <input type="text" name="emailCode" lay-verify="required" placeholder="请输入密码"
                                autocomplete="off" class="layui-input">

                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn layui-btn-normal" id="getEmailCode">获取验证码</button>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-block">
                            <input type="password" name="password" required="required" lay-verify="required"
                                placeholder="请输入密码" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">验证码</label>
                        <div class="layui-input-block">
                            <input type="text" name="validateCode" lay-verify="required|number" placeholder="验证码"
                                autocomplete="off" class="layui-input" id="usercode">
                            <img th:src="@{/captcha/captchaImage(type=${captchaType})}" class="imgcode" width="85%" />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn layui-disabled" disabled lay-submit=""
                                lay-filter="forget" id="btnSubmit">修改密码</button>
                        </div>
                    </div>
                </form>
                <fieldset class="layui-elem-field">
                    <legend>使用第三方登录</legend>
                    <div class="layui-field-box">
                        <!--<a href="/register.html" rel="nofollow" class="layui-btn layui-btn-info layui-btn-xs">注册</a>-->
                        <!--<a href="" rel="nofollow" class="layui-btn layui-btn-info layui-btn-xs">QQ登录</a>
                    <a href="" rel="nofollow" class="layui-btn layui-btn-info layui-btn-xs">Github登录</a>-->
                    </div>
                </fieldset>
            </div>
            <!-- login end -->
        </div>

    </section>
    <style>
        /*登录样式*/
        #login {
            width: 350px;
            height: 500px;
            margin: 0 auto;
            background-color: #FFF;
            border-radius: 5px;

        }

        #login p {
            font-size: 32px;
            text-align: center;
            padding: 20px 0;
        }

        #login form {
            padding: 10px;
        }



        #login .layui-form .layui-form-item .layui-input-block {
            margin-left: 80px;
            padding-right: 40px;
        }

        #login .layui-elem-field legend {
            text-align: center;
        }

        #login .layui-field-box {
            text-align: center;
            padding: 20px 0;
        }

        #login .layui-elem-field {
            margin-top: 20px;
            border-bottom: 0;
            border-left: 0;
            border-right: 0;
        }

        #usercode {
            width: 65px;
            margin-right: 10px;
            float: left;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        .imgcode {
            width: 88px;
            height: 38px;
        }

        #sendCode {
            padding: 0 10px;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        footer {
            position: fixed;
            bottom: 0;
            width: 100vw;
        }
    </style>
    <!-- 底部导航 -->
    <th:block th:include="bobey/blog_include::bottom" />
    <th:block th:include="bobey/blog_include::footer_js" />
    <script src="../static/ajax/libs/validate/jquery.validate.min.js"
        th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
    <script th:inline="javascript"> var ctx = [[@{/}]]; var captchaType = [[${captchaType}]]; </script>
    <script src="../static/ajax/libs/blockUI/jquery.blockUI.js"
        th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
    <script src="../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui.js?v=4.1.0}"></script>
    <script th:inline="JavaScript">

        $(function () {
            validateKickout();
            $('.imgcode').click(function () {
                var url = ctx + "captcha/captchaImage?type=" + captchaType + "&s=" + Math.random();
                $(".imgcode").attr("src", url);
            });
        });
        function validateKickout() {
            if (getParam("kickout") == 1) {
                layer.alert("<font color='red'>您已在别处登录，请您修改密码或重新登录</font>", {
                    icon: 0,
                    title: "系统提示"
                },
                    function (index) {
                        //关闭弹窗
                        layer.close(index);
                        if (top != self) {
                            top.location = self.location;
                        } else {
                            var url = location.search;
                            if (url) {
                                var oldUrl = window.location.href;
                                var newUrl = oldUrl.substring(0, oldUrl.indexOf('?'));
                                self.location = newUrl;
                            }
                        }
                    });
            }
        }

        function getParam(paramName) {
            var reg = new RegExp("(^|&)" + paramName + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return decodeURI(r[2]);
            return null;
        }

        var wait = 60, btnSub = $("#btnSubmit");
        function time(btn) {
            if (wait === 0) {
                btn.attr("disabled", false);
                btn.removeClass("layui-disabled");
                wait = 60;
            } else {
                btn.attr("disabled", 'disabled');
                btn.html(wait + "秒后可获取");
                btn.addClass("layui-disabled");
                btnSub.attr("disabled", false);
                btnSub.removeClass("layui-disabled");
                wait--;
                setTimeout(function () {
                    time(btn);
                }, 1000);
            }
        };
        $("#getEmailCode").click(function () {
            //验证是否正确输入邮箱
            var emailRex = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            var username = $.common.trim($("input[name='email']").val());
            if (!emailRex.test(username)) {
                layer.msg("请输入正确邮箱!");
            }
            else {
                $.ajax({
                    type: "get",
                    url: ctx + "user/sendFindEmailCode/" + $.common.trim($("input[name='email']").val()),
                    success: function (r) {
                        if (r.code == 0) {
                            time($("#getEmailCode"));
                            layer.msg(r.msg)
                        }
                        else {
                            layer.msg(r.msg);
                        }

                    }
                });
            }
        })
        function forget() {
            var username = $.common.trim($("input[name='email']").val());
            var password = $.common.trim($("input[name='password']").val());
            var validateCode = $("input[name='validateCode']").val();
            var emailCode = $.common.trim($("input[name='emailCode']").val());
            $.ajax({
                type: "post",
                url: ctx + "user/forget",
                data: {
                    "email": username,
                    "password": password,
                    "validateCode": validateCode,
                    "emailCode": emailCode
                },
                success: function (r) {
                    if (r.code == 0) {
                        /*跳转到博客主页*/
                        location.href = ctx + 'index';
                    } else {
                        $.modal.closeLoading();
                        $('.imgcode').click();
                        $(".code").val("");
                        $.modal.msg(r.msg);
                    }
                }
            });
        }


    </script>




</body>

</html>